const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
//const { CleanWebpackPlugin } = require('clean-webpack-plugin');
//path.resolve 将相对路径解析为绝对路
// path.resolve 默认返回一个以相对于当前的工作目录的绝对路径。
module.exports = {
  mode: "development", //production
  entry: "./src/main.js", //可以是对象, 配置多页面
  output: {
    // "[name].[hash].bundle.js"
    filename: "[name]_[hash].bundle.js", //打包后js的名称 此选项决定了每个输出 bundle 的名称。这些 bundle 将写入到 output.path 选项指定的目录下。
    path: path.resolve(__dirname, "dist"), //打包输出到当前路径的build文件夹中
    publicPath: "/", // 服务器下资源引用的根目录
    //loader配置规则
    clean: true,
    library: "gg",
    libraryTarget: "umd",
    libraryExport: "default"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader" //将js中的css通过style方式注入到html中
        ]
      },
      // 使用静态目录 public 和 动态打包asset 区别是, 不打包则需要自己手动复制静态资源目录到服务器/webpack不会动这些文件,
      // 打包可以防止缓存/提前发现丢失的文件/会自动合并一些json js之类的文件
      {
        test: /\.json$/, //打包其他资源, 加入打包的资源 可以在代码中使用 require('..xxx) 导入
        type: "asset"
      },
      {
        test: /.(jpg|png|jpeg|gif)$/,
        type: "asset"
      }
    ]
  },
  plugins: [
    //new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "Development",
      template: "./index.html" //以该目录下的html为模版
    })
  ],
  devServer: {
    static: "./", // 告知 dev server，静态资源服务器起始路径
    compress: true,
    port: 9001,
    host: "0.0.0.0",
    hot: true,
    open: false //自动打开浏览器
  },
  resolve: {
    alias: {
      "@asset": path.resolve(__dirname, "/asset"),
      "@src": path.resolve(__dirname, "/src")
    }
  }
};
console.log(path.resolve());

// 启用devServer,不只配置, 还需要script中添加参数  serve --open
// --watch 监听 , --mode development 修改环境变量为开发环境
// --config webpack.config.js 指定配置文件路径, 可忽略(默认 webpack.config.js)
// 不要将 --watch 与 serve 一起使用没有任何意义
//"dev": "webpack serve --open --config webpack.config.js --watch --mode development"
